<template>
	<view>
		<u-popup :show="ewmShow" mode="center" @close="changeCloseEwm">
			<view class="storeEwm">
				<canvas canvas-id="qrcode" style="position: absolute;left: 0;top: -10000rpx;"  />
				<view class="fsz-30 fw-b u-text-center mb-40">扫码支付</view>
				<image :src="QRCodeFilePath" mode="" class="ewm"></image>
				<view class="btn df-aic-jucen fsz-28" @click="createPoster">保存二维码</view>
				<canvas canvas-id="poster" class="poster_canvas"></canvas>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import uQRCode from '@/utils/uqrcode.js';
	export default {
		name: 'NoData',
		props: {
			//show: 加载组件，但是不弹出提示框
			show: {
				type: [Boolean],
			},
			storeId: {
				type: [String,Number],
			},
			type: {
				type: [String,Number],
			},
		},
		watch: {
			//show:监听组件加载，判断是否需要弹出更新提示
			show(newVal, oldVal) {
				if (newVal) {
					this.ewmShow = true;
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: '/pages/store/storePay?id='+this.storeId+'&type='+this.type,
						size: 150,
						margin:5,
						success: res => {
							this.QRCodeFilePath = res;
						}
					});
				}
			}
		},
		data() {
			return {
				ewmShow:false,
				QRCodeFilePath:'',
				codeFile:''
			}
		},
		methods:{
			changeCloseEwm(){
				this.ewmShow = false;
				this.$emit('changeCloseEwm')
			},
			download(){
				this.changeCloseEwm()
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.posterFilePath,
					success: ()=> {
						uni.$u.toast('已保存到相册');
					},
				});
				// #endif
				// #ifdef H5
				uni.previewImage({
					urls:[this.posterFilePath]
				})
				// #endif
			},
			createPoster() {
				// 如果已经生成好海报了，直接下载
				if(this.posterFilePath)return this.download()
				
				if(this.isCreating)return
				this.isCreating = true
				uni.showLoading({
					mask:true
				})
				
				// 创建画布，画布左上角为坐标原点
				// canvas宽、高由class控制
				const ctx = uni.createCanvasContext('poster', this);
				ctx.setFillStyle('#FFFFFF')
				// 创建矩形：x坐标、y坐标、宽、高
				ctx.fillRect(85, 0, 200, 200);
				ctx.fillRect(85, 0, 200, 200);
				ctx.drawImage(this.QRCodeFilePath, 85,0, 200, 200);
				
				// 合成图片
				ctx.save();
				ctx.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'poster',
						success: res => {
							uni.hideLoading();
							this.isCreating = false;
							this.posterFilePath = res.tempFilePath;
							this.download();
						},
						fail: (err) => {
							console.error(err);
						}
					}, this);
				});
			},
			
		}
	}

</script>
<style lang="scss" scoped>
	.storeEwm{
		width: 590rpx;
		padding: 60rpx 20rpx 30rpx;
		.ewm{
			display: block;
			width: 350rpx;
			height: 350rpx;
			margin: auto;
		}
		.btn{
			height: 78rpx;
			background: #E93323;
			border-radius: 88rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			margin: 60rpx auto 0;
		}
		.poster_canvas{
			width: 375px;
			height: 350px;
			position: fixed;
			top: -10000rpx;
			left: 0rpx;
		}
		.u-text-center {
			text-align: center;
		}
	}

</style>
